<template>
  <el-popover placement="right" title="" trigger="hover" v-if="urlAttr">
<!--    <img alt="" :src="URL" style='height: 300px;width: 400px'/>-->
    <el-image
      alt=""
      style='height: 300px;width: 300px'
      :src="URL"
      :preview-src-list="srcList">
    </el-image>
    <img slot="reference" :src="URL" alt="" style="max-height: 50px;max-width: 50px">
  </el-popover>
</template>

<script>
import {API_DEFAULT_CONFIG} from '@/config'

export default {
  name: 'imgDisplayer',
  props: ['urlAttr'],
  computed: {
    /**
     * @return {string}
     */
    URL() {
      return `${this.imageUrl}${this.urlAttr}?token=${this.token}`
    },
    token() {
      return this.$cookie.get('token')
    },
    imageUrl() {
      return `${API_DEFAULT_CONFIG.baseURL}/pub`
    },
    srcList(){
      return [`${this.imageUrl}${this.urlAttr}?token=${this.token}`]
    }
  }
}
</script>

<style scoped>

</style>
